<template>
	<view class="">
		
		
	
		
		<!-- 商品 -->
		<view class="modeRow">
			<view v-for="(item,index) in list" :key="index" class="list" @click="go_detail(item)">
				<u-image :src="item.cover" width="340" height="340" mode="widthFix"></u-image>
		
				<view class="listBottom">
					<view class="title">
						{{item.goodsName}}
					</view>
					<view class="listDes">
						<view class="price">￥{{item.price}}</view>
						<view class="buy">
						 购买	
						</view>
					</view>
		
				</view>
			</view>
		</view>
		
		
		
		
		<u-loadmore :status="status" />
		
		
		
		
		
	</view>
</template>

<script>

	export default {
		
		data() {
			return {
				
				list:[],
			
				page: 1,
				status: 'loadmore',
				
			}
		},
		onLoad() {
           
			  this.goods()
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.goods()
			}
		
		},
		methods: {
			go_detail(item){
				uni.navigateTo({
					url:"../shop/detail?id="+item.id
				})
			},
			
			goods(){
				this.$u.post('/api/index/goods', {
					goods_id:"",
					page:this.page,
					
				}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {
				
				})
			
			},
			
		}
	}
</script>

<style lang="scss">
	.searchTop {

		background: #007502;
		padding: 30rpx;
		
	}
	
	.modeRow {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 690rpx;
		margin:20rpx auto;
	}
	
	.list {
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		width: 340rpx;
		margin-bottom: 20rpx;
	
		.listBottom {
			padding: 20rpx;
	
			.listDes {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
	
	
			.price {
				font-size: 36rpx;
				color: #FF7E01;
			}
			.buy{
				background: #007502;
				border-radius: 30rpx;
				text-align: center;
				color: #FFFFFF;
				width: 100rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;

			}
		}
	}
	.grid-text{
		margin-top: 10rpx;
	}
	

			
</style>
